<!-- 非居民低压新装 -->
<template>
  <view v-if="stepNmuber == 1">
    <view class="newclothes-dom-resident">
      <view style="background: #fff;  padding: 20px 10px 10px; border-radius: 4px;" class="pb140">
        <uni-forms ref="formref" :model="paramForm" :rules="formrules" labelWidth="150px" label-position="top">
          <uni-section title="联系人证件" type="line"></uni-section>
          <uni-forms-item label="身份证正面" name="sfzzmfileId" required>
            <view class="uni-center border" style="background-color: #fff; font-size:0;" @click="getCardFile">
              <image v-if="paramForm.sfzzm && paramForm.sfzzm.fileId" class="image" mode="widthFix" :src="filePreviewUrl + '?fileId=' + paramForm.sfzzm.fileId" />
              <image v-else class="image" src="@/static/img/idcard.png" mode="widthFix" />
            </view>
          </uni-forms-item>
          <uni-forms-item label="身份证反面" name="sfzfmfileId" required>
            <view class="uni-center border" style="background:#fff; font-size:0;" @click="getBackCardFile">
              <image v-if="paramForm.sfzfm && paramForm.sfzfm.fileId" class="image" mode="widthFix" :src="filePreviewUrl + '?fileId=' + paramForm.sfzfm.fileId" />
              <image v-else class="image" src="@/static/img/idcard1.png" mode="widthFix" />
            </view>
          </uni-forms-item>
          <uni-section title="联系人信息" type="line"></uni-section>
          <uni-forms-item label="联系人" name="lxr" required>
            <uni-easyinput v-model="paramForm.lxr" placeholder="点击右侧相机图标" suffix-icon="camera" @iconClick="getCardFile" disabled />
          </uni-forms-item>
          <uni-forms-item label="联系人身份证号" name="lxrsfzh" required>
            <uni-easyinput v-model="paramForm.lxrsfzh" placeholder="点击右侧相机图标" suffix-icon="camera" @iconClick="getCardFile" disabled />
          </uni-forms-item>
          <uni-forms-item label="联系人电话" name="lxsj" required>
            <uni-easyinput v-model="paramForm.lxsj" placeholder="联系人电话" />
          </uni-forms-item>
          <uni-section title="法人证件" type="line"></uni-section>
          <uni-forms-item label="法人身份证正面" name="frsfzzmfileId" required>
            <view class="uni-center border" style="background-color: #fff; font-size:0;" @click="getfrCardFile">
              <image v-if="paramForm.frsfzzm && paramForm.frsfzzm.fileId" class="image" mode="widthFix" :src="filePreviewUrl + '?fileId=' + paramForm.frsfzzm.fileId" />
              <image v-else class="image" src="@/static/img/idcard.png" mode="widthFix" />
            </view>
          </uni-forms-item>
          <uni-forms-item label="法人身份证反面" name="frsfzfmfileId" required>
            <view class="uni-center border" style="background:#fff; font-size:0;" @click="getfrBackCardFile">
              <image v-if="paramForm.frsfzfm && paramForm.frsfzfm.fileId" class="image" mode="widthFix" :src="filePreviewUrl + '?fileId=' + paramForm.frsfzfm.fileId" />
              <image v-else class="image" src="@/static/img/idcard1.png" mode="widthFix" />
            </view>
          </uni-forms-item>
          <uni-section title="企业信息" type="line"></uni-section>
          <uni-forms-item label="企业名称" name="yhmc" required>
            <uni-easyinput v-model="paramForm.yhmc" />
          </uni-forms-item>
          <uni-forms-item label="企业用电地址" name="yhdz" required>
            <uni-easyinput v-model="paramForm.yhdz" placeholder="企业用电地址" suffix-icon="location" @iconClick="getLocation('yhdz')" />
          </uni-forms-item>
          <uni-forms-item label="企业类型" name="qylx" required>
            <uni-data-select v-model="paramForm.qylx" :localdata="DYDJLIST" placeholder="请选择企业类型" :clear="false"></uni-data-select>
          </uni-forms-item>
          <uni-forms-item label="法人姓名" name="frxm" required>
            <uni-easyinput v-model="paramForm.frxm" placeholder="法人姓名" suffix-icon="camera" @iconClick="getfrCardFile" disabled />
          </uni-forms-item>
          <uni-forms-item label="法人身份证号" name="zjbh" required>
            <uni-easyinput v-model="paramForm.zjbh" placeholder="点击右侧相机图标" suffix-icon="camera" @iconClick="getfrCardFile" disabled />
          </uni-forms-item>
          <uni-forms-item label="法人电话" name="frdh" required>
            <uni-easyinput v-model="paramForm.frdh" placeholder="法人电话" />
          </uni-forms-item>
          <uni-section title="纳税人信息" type="line"></uni-section>
          <uni-forms-item label="纳税人名称" name="nsrmc" required>
            <uni-easyinput v-model="paramForm.nsrmc" placeholder="纳税人名称" />
          </uni-forms-item>
          <uni-forms-item label="纳税识别号" name="nsrsbh" required>
            <uni-easyinput v-model="paramForm.nsrsbh" placeholder="纳税识别号" />
          </uni-forms-item>
          <uni-forms-item label="纳税人地址" name="nsrdz" required>
            <uni-easyinput v-model="paramForm.nsrdz" placeholder="纳税人地址" suffix-icon="location" @iconClick="getLocation('nsrdz')" />
          </uni-forms-item>
          <uni-forms-item label="纳税人电话" name="nsrdh" required>
            <uni-easyinput v-model="paramForm.nsrdh" placeholder="纳税人电话" />
          </uni-forms-item>
          <uni-forms-item label="纳税人开户行" name="nsrkhh" required>
            <uni-easyinput v-model="paramForm.nsrkhh" placeholder="纳税人开户行" />
          </uni-forms-item>
          <uni-forms-item label="纳税人银行账号" name="nsryhzh" required>
            <uni-easyinput v-model="paramForm.nsryhzh" placeholder="纳税人银行账号" />
          </uni-forms-item>
          <uni-section title="开户银行" type="line"></uni-section>
          <uni-forms-item label="开户银行" name="kfyhfileId" required>
            <view class="uni-center border" style="background-color: #fff; font-size:0;" @click="getkfyhFile">
              <image v-if="paramForm.kfyh && paramForm.kfyh.fileId" class="image" mode="widthFix" :src="filePreviewUrl + '?fileId=' + paramForm.kfyh.fileId" />
              <image v-else class="image" src="@/static/img/bank-card.png" mode="widthFix" />
            </view>
          </uni-forms-item>
          <uni-section title="企业营业执照" type="line"></uni-section>
          <uni-forms-item label="企业营业执照" name="yyzzfileId" required>
            <view class="uni-center border" style="background-color: #fff; font-size:0;" @click="getYyzFile">
              <image v-if="paramForm.yyzz && paramForm.yyzz.fileId" class="image" mode="widthFix" :src="filePreviewUrl + '?fileId=' + paramForm.yyzz.fileId" />
              <image v-else class="image" src="@/static/img/license.png" mode="widthFix" />
            </view>
          </uni-forms-item>
          <uni-section title="物权证信息" type="line"></uni-section>
          <uni-forms-item label="物权证首页" name="wqzfileId" required>
            <view class="uni-center border" style="background-color: #fff; font-size:0;" @click="getWqzFile">
              <image v-if="paramForm.wqz && paramForm.wqz.fileId" class="image" mode="widthFix" :src="filePreviewUrl + '?fileId=' + paramForm.wqz.fileId" />
              <image v-else class="image" src="@/static/img/idcard2.png" mode="widthFix" />
            </view>
          </uni-forms-item>
        </uni-forms>
      </view>
    </view>
    <view class="button-submit">
      <button type="primary" @click="doNext" style="margin-left: 10px;margin-right:10px;">提 交</button>
    </view>
  </view>
  <view v-if="stepNmuber == 2">
    <agreement @agreementConfirm="stepNmuber = 3" @agreementCancel="stepNmuber = 1" />
  </view>
  <view v-if="stepNmuber == 3">
    <business-signature @signatureConfirm="signatureConfirm" @signatureCancel="stepNmuber = 1" />
  </view>
</template>

<script lang="ts" setup>
  import agreement from "./agreement.vue";
  import businessSignature from "@/pages/bspsd/components/business-signature.vue";
  import { getPhone } from "@/utils/storage";
  import { SysZfdmQuery } from "@/api/request/SysZfdmQuery";
  import { filePreviewUrl } from "@/api/url";
  import { SysFiles } from "@/api/tables/SysFiles";
  import { IDCardOCR } from "@/api/request/IDCardOCR";
  import { HlwFeiJuMinXinZhuang } from "@/api/request/ykgl";
  import { ChooseUploadFile } from "@/api/request/ChooseUploadFile";
  import { SysZfdm } from "@/api/tables/SysZfdm"
  import { ref, onMounted } from "vue"
  const paramForm = ref({
    lxr: '',
    lxrsfzh: '',
    lxsj: '',
    yhmc: '',
    yhdz: '',
    qylx: '',
    frxm: '',
    frdh: '',
    zjbh: '',
    nsrmc: '',
    nsrsbh: '',
    nsrdz: '',
    nsrdh: '',
    nsrkhh: '',
    nsryhzh: '',
    sfzzm: {} as SysFiles,
    sfzzmfileId: '',
    sfzfm: {} as SysFiles,
    sfzfmfileId: '',
    frsfzzm: {} as SysFiles,
    frsfzzmfileId: '',
    frsfzfm: {} as SysFiles,
    frsfzfmfileId: '',
    kfyh: {} as SysFiles,
    kfyhfileId: '',
    yyzz: {} as SysFiles,
    yyzzfileId: '',
    wqz: {} as SysFiles,
    wqzfileId: '',
    dzqm: {} as SysFiles
  })
  const formrules = {
    lxr: { rules: [{ required: true, errorMessage: '联系人不能为空' }] },
    lxrsfzh: { rules: [{ required: true, errorMessage: '联系人身份证号不能为空' }] },
    lxsj: {
      rules: [
        { required: true, errorMessage: '请输入联系人电话' },
        { pattern: /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/, errorMessage: '手机号码格式错误！' },
      ]
    },
    yhmc: { rules: [{ required: true, errorMessage: '请输入企业名称' }] },
    yhdz: { rules: [{ required: true, errorMessage: '请输入企业用电地址' }] },
    qylx: { rules: [{ required: true, errorMessage: '请选择企业类型' }] },
    frxm: { rules: [{ required: true, errorMessage: '请输入法人姓名' }] },
    frdh: {
      rules: [
        { required: true, errorMessage: '请输入法人电话' },
        { pattern: /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/, errorMessage: '手机号码格式错误！' },
      ]
    },
    zjbh: { rules: [{ required: true, errorMessage: '法人身份证号不能为空' }] },
    nsrmc: { rules: [{ required: true, errorMessage: '请输入纳税人名称' }] },
    nsrsbh: { rules: [{ required: true, errorMessage: '请输入纳税人识别号' }] },
    nsrdz: { rules: [{ required: true, errorMessage: '请输入纳税人地址' }] },
    nsrdh: {
      rules: [
        { required: true, errorMessage: '请输入纳税人电话' },
        { pattern: /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/, errorMessage: '手机号码格式错误！' },
      ]
    },
    nsrkhh: { rules: [{ required: true, errorMessage: '纳税人开户行' }] },
    nsryhzh: { rules: [{ required: true, errorMessage: '纳税人银行账号' }] },
    sfzzmfileId: { rules: [{ required: true, errorMessage: '请上传联系人身份证正面' }] },
    sfzfmfileId: { rules: [{ required: true, errorMessage: '请上传联系人身份证反面' }] },
    frsfzzmfileId: { rules: [{ required: true, errorMessage: '请上传法人身份证正面' }] },
    frsfzfmfileId: { rules: [{ required: true, errorMessage: '请上传法人身份证正面' }] },
    yyzzfileId: { rules: [{ required: true, errorMessage: '请上传营业执照' }] },
    kfyhfileId: { rules: [{ required: true, errorMessage: '请上开户银行' }] },
    wqzfileId: { rules: [{ required: true, errorMessage: '请上传物权证' }] }
  }
  const formref = ref(null)
  const stepNmuber = ref(1)
  const DYDJLIST = ref<Array<SysZfdm>>([])

  onMounted(() => {
    getType()
  })
  const getType = function () {
    SysZfdmQuery({
      data: { zfdm: { dmzl: "QYLX" } },
      success: (result) => {
        let list = result || []
        for (let item of list) {
          item.text = item.dmnr
          item.value = item.dmbh
        }
        DYDJLIST.value = list
      }
    })
  }
  // 安装地址 打开地图
  const getLocation = function (key : string) {
    uni.showLoading({
      title: '加载中'
    });
    uni.getLocation({
      type: 'gcj02',
      geocode: true,
      isHighAccuracy: true,
      success: function (resdata) {
        uni.hideLoading()
        uni.chooseLocation({
          longitude: resdata.longitude,
          latitude: resdata.latitude,
          keyword: resdata.address.poiName,
          success: (res) => {
            if (key == 'yhdz') {
              paramForm.value.yhdz = res.address
            } else {
              paramForm.value.nsrdz = res.address
            }
          },
        });
      },
      fail: function () {
        uni.hideLoading()
        uni.chooseLocation({
          success: (res) => {
            if (key == 'yhdz') {
              paramForm.value.yhdz = res.address
            } else {
              paramForm.value.nsrdz = res.address
            }
          },
        });
      }
    });

  }
  const doNext = function () {
    // 数据校验
    formref.value.validate().then(res => {
      uni.showModal({
        title: "是否确定提交?",
        cancelText: "取消",
        confirmText: "确定",
        confirmColor: "#F43F3B",
        success: (res) => {
          if (res.confirm) {
            stepNmuber.value = 2
          }
        }
      })
    }).catch(err => {
      uni.showToast({ icon: "none", title: err[0].errorMessage })
    })
  }
  //  上传 身份证 正面
  const getCardFile = function () {
    ChooseUploadFile({
      mask: true,
      success: (result : SysFiles) => {
        uni.showLoading({ mask: true })
        paramForm.value.sfzzm = result
        paramForm.value.sfzzmfileId = result.fileId || ''
        IDCardOCR({
          data: {
            fileId: result.fileId,
          },
          success: (res) => {
            uni.hideLoading()
            paramForm.value.lxrsfzh = res.IdNum
            if (paramForm.value.lxr == undefined || paramForm.value.lxr == "") {
              paramForm.value.lxr = res.Name
            }
            paramForm.value.lxsj = getPhone()
            if (res.IdNum == '' || res.IdNum.length < 18 || res.Name == '') {
              uni.showModal({ content: "身份证照片检测失败 请重新上传", showCancel: false })
            }
          }, fail: () => {
            uni.hideLoading()
            uni.showModal({ content: "身份证照片检测失败", showCancel: false })
          }
        })
      },
    })
  }
  // 上传身份证反面
  const getBackCardFile = function () {
    ChooseUploadFile({
      mask: true,
      success: (result : SysFiles) => {
        paramForm.value.sfzfm = result
        paramForm.value.sfzfmfileId = result.fileId || ''
      },
    })
  }
  //  上传 法人身份证 正面
  const getfrCardFile = function () {
    ChooseUploadFile({
      mask: true,
      success: (result : SysFiles) => {
        uni.showLoading({ mask: true })
        paramForm.value.frsfzzm = result
        paramForm.value.frsfzzmfileId = result.fileId || ''
        IDCardOCR({
          data: {
            fileId: result.fileId,
          },
          success: (res) => {
            uni.hideLoading()
            paramForm.value.zjbh = res.IdNum
            if (paramForm.value.frxm == undefined || paramForm.value.frxm == "") {
              paramForm.value.frxm = res.Name
            }
            if (res.IdNum == '' || res.IdNum.length < 18 || res.Name == '') {
              uni.showModal({ content: "身份证照片检测失败 请重新上传", showCancel: false })
            }
          }, fail: () => {
            uni.hideLoading()
            uni.showModal({ content: "身份证照片检测失败", showCancel: false })
          }
        })
      },
    })
  }
  // 上传法人身份证反面
  const getfrBackCardFile = function () {
    ChooseUploadFile({
      mask: true,
      success: (result : SysFiles) => {
        paramForm.value.frsfzfm = result
        paramForm.value.frsfzfmfileId = result.fileId || ''
      },
    })
  }
  // 上传 开户银行
  const getkfyhFile = function () {
    ChooseUploadFile({
      mask: true,
      success: (result : SysFiles) => {
        paramForm.value.kfyh = result
        paramForm.value.kfyhfileId = result.fileId || ''
      },
    })
  }
  // 上传 营业执照
  const getYyzFile = function () {
    ChooseUploadFile({
      mask: true,
      success: (result : SysFiles) => {
        paramForm.value.yyzz = result
        paramForm.value.yyzzfileId = result.fileId || ''
      },
    })
  }
  // 上传 物权证
  const getWqzFile = function () {
    ChooseUploadFile({
      mask: true,
      success: (result : SysFiles) => {
        paramForm.value.wqz = result
        paramForm.value.wqzfileId = result.fileId || ''
      },
    })
  }

  // 签名完成
  const signatureConfirm = (file) => {
    paramForm.value.dzqm = file
    addClick()
  }
  const addClick = function () {
    HlwFeiJuMinXinZhuang({
      data: {
        jbxx: {
          yhmc: paramForm.value.yhmc,
          yhdz: paramForm.value.yhdz,
          lxsj: paramForm.value.lxsj,
          lxr: paramForm.value.lxr,
          lxrsfzh: paramForm.value.lxrsfzh,
          zjbh: paramForm.value.zjbh,
        },
        nsxx: {
          nsrmc: paramForm.value.nsrmc,
          nsrsbh: paramForm.value.nsrsbh,
          nsrdz: paramForm.value.nsrdz,
          nsrdh: paramForm.value.nsrdh,
          nsrkhh: paramForm.value.nsrkhh,
          nsryhzh: paramForm.value.nsryhzh,
          qylx: paramForm.value.qylx,
          frxm: paramForm.value.frxm,
          frdh: paramForm.value.frdh,
        },
        sfzzm: paramForm.value.sfzzm,
        sfzfm: paramForm.value.sfzfm,
        frsfzzm: paramForm.value.frsfzzm,
        frsfzfm: paramForm.value.frsfzfm,
        kfyh: paramForm.value.kfyh,
        yyzz: paramForm.value.yyzz,
        wqz: paramForm.value.wqz,
        dzqm: paramForm.value.dzqm,
      },
      success: (result) => {
        uni.showModal({
          title: "提示",
          content: "你的业务已提交成功，稍后可以在：我的->业务办理中查询进度！",
          showCancel: false,
          success: () => {
            uni.navigateBack()
          },
        })
      },
      fail: (_code, message) => {
        uni.showModal({
          title: "错误提示",
          content: "提交失败：" + message,
          showCancel: false,
          success: () => {
            uni.navigateBack()
          }
        })
      }
    })
  }
</script>

<style lang="scss" scoped>
  .image {
    min-height: 200px;
  }
</style>